<template>
  <a-layout id="the_module">
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      class="ant-pro-sider-menu-sider"
      style="box-shadow: 2px 0 6px rgba(0,21,41,.35); z-index: 10;"
    >
      <div class="logo" @click="() => {this.$router.push('/entry')}">
        <img src="../../static/images/login_icon.png" class="logo" />
        <span v-show="!collapsed" class="title">佳华物流集团</span>
      </div>
      <a-spin tip="加载中..." :spinning="menuLoading">
        <a-menu
          theme="dark"
          mode="inline"
          :open-keys.sync="openKeys"
          v-model="selectedKeys"
          :style="{ borderRight: 0 }"
        >
          <a-sub-menu v-for="menu in menus" :key="menu.name">
            <span slot="title">
              <ud-icon :name="menu.icon" />
              <span>{{menu.name}}</span>
            </span>
            <a-menu-item v-for="item in menu.childList" :key="item.url" style="padding-left:52px; ">
              <router-link :to="{path:  '/' + rootMenuUrl + '/' + item.url}" />
              {{item.name}}
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-spin>
    </a-layout-sider>

    <a-layout style="position: relative; min-height: 100%; min-width: 1145px;">
      <a-layout-header
        style="background: #fff; padding: 0 40px 0 0;  box-shadow: 0 1px 4px rgba(0,21,41,.08);  z-index: 9;"
      >
        <a-row>
          <a-col :span="8">
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
            />
          </a-col>
          <a-col :span="16" style="text-align: right;">
            <login-user />
          </a-col>
        </a-row>
      </a-layout-header>

      <a-layout-content :style="{marginBottom: '100px', minHeight: '480px'}">
        <template v-if="btnControl">
          <!-- <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" />-->
          <router-view />
        </template>
      </a-layout-content>

      <a-layout-footer class="footer">
        <div class="links">
          Copyright
          <a-icon type="copyright" />2020
          <span>江苏佳华物流发展有限公司</span>
        </div>
        <div class="copyright">
          <p>江苏易船货科技有限公司 技术支持</p>
        </div>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import { Layout, Breadcrumb, Menu, Icon } from 'ant-design-vue'
import { queryMenuByPid, queryButtonByPid } from '@/api'
import LoginUser from '@/components/LoginUser'
// import store from 'store'

export default {
  data () {
    return {
      collapsed: false,
      menus: [],
      defaultOpenKeys: [],
      openKeys: [],
      defaultSelectedKeys: [],
      selectedKeys: [],
      rootMenuUrl: '/',
      btnControl: false,
      menuLoading: false
    }
  },
  components: {
    [Layout.name]: Layout,
    [Layout.Header.name]: Layout.Header,
    [Layout.Sider.name]: Layout.Sider,
    [Layout.Content.name]: Layout.Content,
    [Layout.Footer.name]: Layout.Footer,
    [Breadcrumb.name]: Breadcrumb,
    [Breadcrumb.Item.name]: Breadcrumb.Item,
    [Menu.name]: Menu,
    [Menu.Item.name]: Menu.Item,
    [Menu.SubMenu.name]: Menu.SubMenu,
    [Icon.name]: Icon,
    LoginUser
  },
  created () {
    // // console.log(this.$route)
    let path = this.$route.path
    path = path.substr(1)
    const gotoUrl = this.$route.meta.selectKeyUrl
    let pathArr = ~path.indexOf('/') ? path.split('/') : [path]
    const rootPath = pathArr[0]
    this.rootMenuUrl = rootPath

    this.menuLoading = true
    queryMenuByPid({ url: rootPath })
      .then(rsp => {
        let hasAuth = false
        // // console.log('Enter module: ', rootPath)
        this.menus = rsp.data
        rsp.data.forEach(v => {
          if (v.childList && v.childList.length > 0) {
            if (v.childList.filter(v1 => v1.url === gotoUrl)[0]) {
              hasAuth = true
            }
          }
        })

        let menuid
        if (!hasAuth && rsp.data && rsp.data[0] && rsp.data[0].childList) {
          this.$router.push(
            '/' + rootPath + '/' + rsp.data[0].childList[0].url
          )
          menuid = rsp.data[0].childList[0].powerId
        } else if (hasAuth) {
          this.openKeys = [this.$route.meta.openKeyName]
          this.selectedKeys = [gotoUrl]
          menuid = this.getMenuId(this.$route.meta.openKeyName, gotoUrl)
        }

        // 获取crud权限
        this.initMenu(menuid)
        this.menuLoading = false
      })
      .catch(() => {
        this.menuLoading = false
      })
  },
  methods: {
    getMenuId (pname, childKey) {
      const p = this.menus.filter(v => v.name === pname)[0]
      const child = p.childList.filter(v => v.url === childKey)[0]
      return child.powerId || ''
    },
    async initMenu (menuid) {
      this.btnControl = false
      if (menuid) {
        await queryButtonByPid({ parentId: menuid }).then(rsp => {
          // // console.log(rsp.data)
          let _bc = Object.fromEntries(rsp.data.map(item => [item.url, true]))
          this.$root._bc = _bc
          this.btnControl = true
        })
      }
    }
  },
  watch: {
    '$route.path': function (newVal, oldVal) {
      this.openKeys = [this.$route.meta.openKeyName]
      this.selectedKeys = [this.$route.meta.selectKeyUrl]
      // 切换页面，切换权限
      this.initMenu(
        this.getMenuId(
          this.$route.meta.openKeyName,
          this.$route.meta.selectKeyUrl
        )
      )
    }
  }
}
</script>

<style lang="less" scoped>
#the_module {
  min-height: 100%;
}

#the_module .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#the_module .trigger:hover {
  color: #1890ff;
}

#the_module .logo {
  height: 32px;
  margin: 16px;
  cursor: pointer;
  img {
    width: 40px;
    height: 20px;
    margin: 0;
    float: left;
    margin: 6px 12px 6px 0;
  }
  span {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    line-height: 32px;
  }
}

.footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;

  .links {
    margin-bottom: 8px;
    color: rgba(0, 0, 0, 0.45);

    a {
      color: rgba(0, 0, 0, 0.45);

      &:hover {
        color: rgba(0, 0, 0, 0.65);
      }

      &:not(:last-child) {
        margin-right: 40px;
      }
    }
  }
  .copyright {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }
}
</style>
